<template>
    <div>
        <van-form :ref="formData">
            <div v-if="this.subTaskInfo.status !== '3' ">
              <van-row class="rowLabel">
                <van-col span="12"  class="colCss">
                    <div class="taskName">任务编号：</div>
                    <div class="taskInfo">{{subTaskInfo.taskCode}}</div>
                </van-col>
                <van-col span="12"  class="colCss">
                    <div class="taskName">任务名称：</div>
                    <div class="taskInfo">{{mainTaskInfo.taskName}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">节点名称：</div>
                  <div class="taskInfo">{{taskNodeName}}</div>
                </van-col>
                <van-col span="12" class="colCss">
                    <div class="taskName">电芯型号：</div>
                    <div class="taskInfo">{{subTaskInfo.electricCoreType}}</div> 
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="defectSelect">
                    <van-field name="checkboxGroup" label="缺陷类型：">
                      <template #input>
                        <van-checkbox-group v-model="formData['defectTypeIdList']" direction="horizontal">
                          <van-checkbox v-for="(item,index) in defectList" 
                          :key="index"
                          :name="item.defectTypeId" 
                          shape="square">
                          {{item.defectName}}
                        </van-checkbox>
                        </van-checkbox-group>
                      </template>
                  </van-field>
                </van-col>
                <van-col span="12" class="colCss">
                  <div class="taskName">电芯编号：</div>
                    <div class="taskInfo">{{subTaskInfo.electricCoreCode}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <uploader 
                  :fileList="formData['fileList']"
                  :currentDefectList="defectOptionList"
                  :title="'上传照片：'"
                  :taskCode = "subTaskInfo.taskCode"
                  @fileChange="fileChange"
                />
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" col="colClass">
                  <div class="taskName"></div>
                  <div class="taskInfo">
                    &nbsp;&nbsp;&nbsp;
                    <van-button @click="loadFile">加载检测照片</van-button>
                  </div>
                </van-col>
              </van-row>
              <van-field name="remark"
                        v-model="formData['remark']"
                        rows="2"
                        autosize
                        label="问题描述："
                        type="textarea"
                        maxlength="100"
                        placeholder="请输入问题描述"
                        show-word-limit />
            </div>

            <div v-if="this.subTaskInfo.status === '3' ">
              <van-row class="rowLabel">
                <van-col span="12"  class="colCss">
                    <div class="taskName">任务编号：</div>
                    <div class="taskInfo">{{subTaskInfo.taskCode}}</div>
                </van-col>
                <van-col span="12"  class="colCss">
                    <div class="taskName">任务名称：</div>
                    <div class="taskInfo">{{mainTaskInfo.taskName}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">节点名称：</div>
                  <div class="taskInfo">{{taskNodeName}}</div>
                </van-col>
                <van-col span="12" class="colCss">
                    <div class="taskName">电芯型号：</div>
                    <div class="taskInfo">{{subTaskInfo.electricCoreType}}</div> 
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">缺陷类型：</div>
                  <div class="taskInfo">{{formData['defectTypeNames']}}</div>
                </van-col>
                <van-col span="12" class="colCss">
                  <div class="taskName">电芯编号：</div>
                    <div class="taskInfo">{{subTaskInfo.electricCoreCode}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="24" class="colCss">
                  <div class="taskName">照片:</div>
                  <div class="taskInfo">
                    <uploader 
                      :fileList="formData['fileList']"
                      :currentDefectList="defectOptionList"
                      :viewMode="true"
                      :taskCode = "subTaskInfo.taskCode"
                      />
                  </div>
                </van-col>
              </van-row>

              <van-row class="rowLabel">
                <van-col span="24" class="colCss">
                  <div class="taskName">问题描述:</div>
                  <div class="taskInfo">
                    {{formData['remark']}}
                  </div>
                </van-col>
              </van-row>
            </div>
        </van-form>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import uploader from '../uploader.vue';
    import { deleteTaskNodeFile, getTaskNodeFileList } from "@/apis/index";

    export default {
        name: 'Form4', 
        props: {
            formDataProp: {
                type: Object,
                default: {}
            },
            mainTaskInfoProp: {
                type: Object,
                default: {}
            },
            subTaskInfoProp: {
                type: Object,
                default: {}
            },
            taskNodeNameProp: {
                type: String,
                default: ''
            },
            defectListProp: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
              formData: {},
              subTaskInfo: {},
              mainTaskInfo: {},
              taskNodeName: '',
              defectList: [],
              defectOptionList: [],
              fileList:[]
            }
        },
        created() {
        },
        mounted() {
        },
        watch: {
            formDataProp: {
                handler(newVal, oldVal) {
                    this.formData = newVal;
                },
                deep: true,
                immediate: true
            },
            mainTaskInfoProp: {
                handler(newVal, oldVal) {
                    this.mainTaskInfo = newVal;
                },
                deep: true,
                immediate: true
            },
            subTaskInfoProp: {
                handler(newVal, oldVal) {
                    this.subTaskInfo = newVal;
                },
                deep: true,
                immediate: true
            },
            taskNodeNameProp: {
                handler(newVal, oldVal) {
                    this.taskNodeName = newVal;
                },
                deep: true,
                immediate: true
            },
            defectListProp: {
                handler(newVal, oldVal) {                    
                    if (newVal.currentDefectList) {
                        let arr = [];
                        newVal.currentDefectList.forEach(item => {
                            arr.push({ id: item.defectTypeId, text: item.defectName });
                        });
                        this.defectOptionList = arr;
                    }
                    this.defectList = newVal.currentDefectList;
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            fileChange(type, data) {
                if (type === 'add') {
                    if (!this.formData['fileList'])
                      this.formData['fileList'] = [];
                    this.formData['fileList'].push(data);

                    if (this.formData['defectTypeIdList']) {
                        let defectTypeIdList = this.formData['defectTypeIdList'];
                        if (data.defectTypeId)
                          defectTypeIdList.push(data.defectTypeId)
                    } else {
                        let defectTypeIdList = [];
                        if (data.defectTypeId)
                          defectTypeIdList.push(data.defectTypeId);
                        this.formData['defectTypeIdList'] = defectTypeIdList;
                    }
                } else if (type === 'delete') {
                    let param = {
                      id: data.id,
                      filePath: data.filePath
                    };
                    deleteTaskNodeFile(param).then(res => {
                      if(res.code === 1) {
                        if (this.formData['fileList']) {
                          let index = this.formData['fileList'].findIndex((item) => {
                            return item.fileName == data.fileName;
                          });
                          if (index > -1) {
                            this.formData['fileList'].splice(index, 1);
                          }
                        }
                        let defectTypeIdList = this.formData['defectTypeIdList'];
                        if (defectTypeIdList) {
                          let index = defectTypeIdList.findIndex((item) => {
                            return item == data.defectTypeId;
                          });
                          if (index > -1)
                            defectTypeIdList.splice(index, 1);
                          }
                        Toast('附件删除成功');
                      }else{
                          Toast(res.msg);
                      }
                    })
                }
          },
          getFormData(commonParam) {
            let param = JSON.parse(JSON.stringify(commonParam));
            param.defectTypeIdList = this.formData.defectTypeIdList;
            param.remark = this.formData.remark;
            param.fileList = this.formData.fileList;
            param.electricCoreType = this.formData.electricCoreType;
            param.electricCoreCode = this.formData.electricCoreCode;
            return param
          },
          loadFile() {
            let param = {
              subTaskId: this.subTaskInfo.id,
              taskNodeInstId: this.formData.taskNodeInstId
            }
            getTaskNodeFileList(param).then(res => {
              if (res.code === 1) {
                if(res.data && res.data.length){
                  res.data.forEach(it=>{
                    it.url = it.fileUrl;
                  })
                }
                this.formData.fileList = res.data;
              }
            })
          }
        },
        components: { uploader }
    }
</script>

<style lang="scss" scoped>
.rowLabel {
  color: #646566;
  .colCss {
    padding: 10px 16px;
  }
}

.rowLabel{
  .taskName{
    display: inline-block;
    width: 6.2em;
  }
  .taskInfo{
    display: inline-block;
    margin-left:12px;
  }
}

.defectSelect{
  .van-cell__value,.van-field__value{
    border: none!important;
    padding: 0px!important;
  }
}
</style>